<div ng-include="'dashboard/header.html'"></div>

<div class="flash">
	<div class="form-inline">
		<div class="input-group">
			<span class="input-group-addon" style="font-weight:bold;">Template</span>
			<select ng-model="currentTemplateName" ng-change="changeCurrentTemplate()" class="form-control">
				<option ng-repeat="templateName in templateList">{{ templateName }}</option>
			</select>
		</div>
		<input type="button" class="btn btn-primary" value="Add Template" data-toggle="modal" data-target="#createTemplateModal">
		<div class="modal fade" id="createTemplateModal" tabindex="-1" role="dialog" aria-hidden="true">
			<div class="modal-dialog">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
						<h4 class="modal-title">Create Template</h4>
					</div>
					<div class="modal-body">
			        	<input type="text" ng-model="newTemplateName" class="form-control" placeholder="New template name">
					</div>
					<div class="modal-footer">
						<button type="button" class="btn btn-primary" data-dismiss="modal" ng-click="createTemplate()">Create Template</button>
					</div>
				</div>
			</div>
		</div>
	</div>
	<form action="" method="post">
		<div class="template">
			<div ng-switch="formatted" ng-show="template">
				<div class="form-inline">
					<div class="input-group">
						<span class="input-group-addon" style="font-weight:bold;">Type</span>
						<span style="display:inline-block;margin-left:10px">
							<label class="radio-inline">
								<input type="radio" ng-model="formatted" name="formatted" ng-value="true"> Formatted
								</label>
							<label class="radio-inline">
								<input type="radio" ng-model="formatted" name="formatted" ng-value="false"> Custom
							</label>
						</span>
					</div>
				</div>
				<br>
				<div class="formatted" ng-switch-when="true">
					<textarea ng-model="template.sqlTemplate" placeholder="SQL Query"
					    ui-ace="{
	                                        mode: 'sqlish',
	                                        theme: 'tomorrow_night_bright',
	                                        useWrapMode: true,
	                                        rendererOptions: { minLines: 10, maxLines: 30, },
	                                        require: ['ace/ext/language_tools'],
	                                        advanced: {
	                                            enableSnippets: true,
	                                            enableBasicAutocompletion: true,
	                                            enableLiveAutocompletion: true
	                                        }
	                                    }"></textarea>
				</div>
				<div class="custom" ng-switch-when="false">
					<textarea ng-model="template.markdownTemplate" placeholder="Markdown"
					    ui-ace="{
	                                        mode: 'markdownish',
	                                        theme: 'tomorrow_night_bright',
	                                        useWrapMode: true,
	                                        rendererOptions: { minLines: 10, maxLines: 30, },
	                                        require: ['ace/ext/language_tools'],
	                                        advanced: {
	                                            enableSnippets: true,
	                                            enableBasicAutocompletion: true,
	                                            enableLiveAutocompletion: true
	                                        }
	                                    }"></textarea>
				</div>
				<br>
				<div class="row">
					<div class="col-md-9">
						<div class="btn-group">
					        <label class="btn btn-primary" ng-model="template.type" btn-radio="'report'">Report</label>
					        <label class="btn btn-primary" ng-model="template.type" btn-radio="'task'">Task</label>
					    </div>
					    <span ng-if="template.type == 'task'">
					    	Scope:
					    	<select ng-model="template.scope.report[0]" ng-change="addInheritedParams()">
					    		<option ng-repeat="templateName in templateList">{{ templateName }}</option>
					    	</select>
							<img ng-show="template.inheritedParamsLoading" src="dashboard/images/loading.gif">
					    </span>
						<h4>Parameters</h4>
						<table class="table table-striped" style="margin-bottom: 5px">
							<tr>
								<th>Name</th>
								<th>Type</th>
								<th>Default Value</th>
								<th>Description</th>
								<th>Required</th>
							</tr>
							<tr ng-repeat="(param, details) in template.params track by $index">
								<td><input type="text" ng-disabled="details.inheritedFrom" ng-model="template.params[param].name"></td>
								<td><input type="text" ng-disabled="details.inheritedFrom" ng-model="template.params[param].type" style="width:60px"></td>
								<td><input type="text" ng-disabled="details.inheritedFrom" ng-model="template.params[param].defaultValue" style="width:100px"></td>
								<td><input type="text" ng-disabled="details.inheritedFrom" style="width:250px" ng-model="template.params[param].description"></td>
								<td style="text-align: center"><input type="checkbox" ng-disabled="details.inheritedFrom" ng-model="template.params[param].isRequired"></td>
							</tr>
						</table>
						<img src="dashboard/images/plus_green.png" ng-click="addVariable()">
					</div>
					<div class="col-md-3" ng-switch-when="true">
						<h4>Chart</h4>
						<input type="checkbox" ng-model="template.hasChart"> Chart:
						<div>X: <input type="text" ng-model="template.chart.x"></div>
						<div>Y: <input type="text" ng-model="template.chart.y" style="margin-top:5px;"></div>
					</div>
				</div>
				<br>
				<input type="button" class="btn btn-success" ng-click="updateTemplate()" value="Update Template" flash="rgba(0, 255, 0, .4)">
				<input type="button" class="btn btn-danger" ng-click="deleteTemplate()" value="Delete Template" flash="rgba(255, 0, 0, .2)">
				<input type="button" class="btn btn-primary" value="Copy Template" data-toggle="modal" data-target="#copyTemplateModal" style="float:right">
				<div class="modal fade" id="copyTemplateModal" tabindex="-1" role="dialog" aria-hidden="true">
					<div class="modal-dialog">
						<div class="modal-content">
							<div class="modal-header">
								<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
								<h4 class="modal-title">Copy Template</h4>
							</div>
							<div class="modal-body">
					        	<input type="text" ng-model="copyTemplateName" class="form-control" placeholder="New template name">
							</div>
							<div class="modal-footer">
								<button type="button" class="btn btn-primary" data-dismiss="modal" ng-click="copyTemplate()">Create Template</button>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</form>
</div>
<br><br>
